<template>
  <div class="doctorlist">
    <div :class="index % 2 !== 0 ? 'active1' : 'active2'">
      {{ item | getDate }}
    </div>
    <div :class="active == 1 ? 'active' : ''" @click="activeBackground(1)">
      上午
    </div>
    <div :class="active == 2 ? 'active' : ''" @click="activeBackground(2)">
      下午
     
    </div>
    <div :class="active == 3 ? 'active' : ''" @click="activeBackground(3)">
     
      晚班
    </div>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: String,
      defaule: "1",
    },
    index: {
      type: Number,
      defaule: 1,
    },
    afternoon: {
      type: Number,
      defaule: 1,
    },
    morning: {
      type: Number,
      defaule: 1,
    },
    night: {
      type: Number,
      defaule: 1,
    },
  },
  data() {
    return {
      active: 1,
    };
  },
  created() {
    if (this.morning == 1) {
      this.active = 1;
    } else if (this.afternoon == 1) {
      this.active = 2;
    } else if (this.night == 1) {
      this.active = 3;
    }
  },
  methods: {
    activeBackground(val) {
      if (val == 1) {
        this.active = val;
       this.$emit("doctorListShow",val,this.index)
      } else if (val == 2) {
         this.active = val;
         this.$emit("doctorListShow",val,this.index)
      } else {
         this.active = val;
         this.$emit("doctorListShow",val,this.index)
      }
    },
  },
  filters: {
    getDate(val) {
      let dates = new Date(val);
      let date = dates.getDate();
      let m = dates.getMonth() + 1;
      let day = dates.getDay();
      if (m < 10 || date < 10 || day == 0) {
        m = "0" + m;
        date = "0" + date;
        day = "7";
      }

      return `${m}/${date}  周${day}`;
    },
  },
};
</script>

<style lang="less" scoped>
.doctorlist {
  width: 100%;
  text-align: center;
  div {
    line-height: 30px;
  }
  .active {
    background: #00b578;
    color: #fff;
  }
  .active1 {
    background: #07b9b9;
    color: #fff;
  }
  .active2 {
    background: #36b2ec;
    color: #fff;
  }
}
</style>